<template>
	<view>
		<!-- 0，头部 -->
		<!-- <login-head></login-head> -->
		<!-- 1，主要标题 -->
		<login-title></login-title>
		<!-- 2，登录核心框 -->
		<view class="content">
			<view class="box">
				<!-- 2.1，手机号 -->
				<view class="box-con">
					<view class="box-con-title">手机号</view>
					<input class="box-con-input" maxlength="11" placeholder="请填写手机号" type="number" name="phone"
						v-model="form.phone" />
					<view class="box-con-clear" @click="clearPhone" v-if="form.phone">
						<image :src="clearImg"></image>
					</view>
				</view>

				<!-- 2.2，密码登录 -->
				<login-by-pwd v-if="loginType == 'pwd' || loginType == 'all'" @changePwd="changePwd"></login-by-pwd>
				<!-- 2.3，验证码登录 -->
				<login-by-code v-if="loginType == 'code' || loginType == 'all'" :phone="form.phone"
					@changeYzm="changeYzm"></login-by-code>
			</view>
			<!-- 2.4，转换登录方式 或忘记密码 -->
			<view class="box-change">
				<text v-if="loginType" @click="changeLoginType('code')">使用短信验证码登录</text>
				<text v-else @click="changeLoginType('pwd')">使用密码登录</text>
			</view>
			<!-- 2.5，忘记密码 -->
			<view class="box-forgot-pwd">
				<view class="text-pwd">
					<text @click="gotoRegister">注册</text>
				</view>
				<view class="text-pwd">
					<text @click="gotoRetrieve">忘记密码</text>
				</view>
			</view>
		</view>

		<!-- 3，登录按钮 -->
		<!-- <view class="login-btn">
			<view class="btn" @click="loginClick">
				<text>登录</text>
			</view>
		</view> -->

		<!-- 3，登录按钮 -->
		<login-btn @clickFun="loginClick" :btnText="btnText"></login-btn>
		<view class="goto-home" @click="visitorLogin">暂无登录，先去逛逛</view>

		<!-- 4，底部隐私协议 -->
		<login-agreement :isChecked="isChecked" @selfChangde="selfChangde"></login-agreement>

		<!-- 5，弹框 -->
		<!-- <lyg-popup :policyPath="policyPath" :protocolPath="protocolPath" :showPopup="isShowPopup"
			@popupState="popupState" @confirm="confirm"></lyg-popup> -->
	</view>
</template>

<script>
	//引入子组件
	import loginHead from './login-child/login-head.vue'

	//引入公共组件
	import loginTitle from '@/components/content/login/login-title.vue'
	import loginAgreement from '@/components/content/login/login-agreement.vue'
	import loginBoxPhone from '@/components/content/login/login-box-login-phone.vue'
	import loginByCode from '@/components/content/login/login-box-code.vue'
	import loginByPwd from '@/components/content/login/login-box-pwd.vue'
	import lygPopup from '@/components/apk/lyg-popup/lyg-popup.vue'
	import loginBtn from '@/components/content/login/login-btn.vue'

	//网络请求
	import {
		httpLoginByPwd,
		httpLoginByCode,
		loginByVisitor
	} from '@/api/http/login/login.js'
	import {
		getMsgs
	} from '@/api/http/msg/msg.js'

	import {
		updateInfoData
	} from '@/object/msg.js'

	import {
		queryAllUserFriendRemarks
	} from '@/api/http/msg/relation.js'

	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		components: {
			loginByCode,
			loginByPwd,
			loginHead,

			loginAgreement,
			loginBoxPhone,
			lygPopup,
			loginTitle,
			loginBtn
		},
		data() {
			return {
				//登录参数
				form: {
					phone: uni.getStorageSync('loginUsername'),
					pwd: '',
					yzm: ''
				},
				//登录方式
				loginType: 'pwd', //pwd：密码；code:验证码    all：都展示
				isChecked: false,
				//删除图标
				clearImg: require('@/static/img/login/clear.svg'),
				isShowPopup: true,
				policyPath: '/subpkg/main/my/agree-on/private-xy/private-xy',
				protocolPath: '/subpkg/main/my/agree-on/user-xy/user-xy',
				btnText: '立即登录'
			}
		},
		computed: {
			...mapState('m_user_info', ['userInfo']),
		},
		methods: {
			...mapActions('m_user_info', ['actUpdateUserInfoData', 'actUpdateLoginData']),
			...mapActions('m_chat', ['updateInfo']),
			...mapMutations('m_chat', ['initStateValue', 'updateFriendNickname']),
			clearPhone() {
				this.form.phone = ''
				//console.log(2313)
			},
			//1，输入密码时
			changePwd(pwd) {
				this.form.pwd = pwd
				//console.log(this.form.pwd)
			},
			//2，改变登录方式
			changeLoginType(type) {
				this.loginType = type
			},
			//3，输入验证码时
			changeYzm(yzm) {
				this.form.yzm = yzm
				//console.log(this.form.yzm)
			},
			//4，是否勾选隐私协议
			selfChangde() {
				this.isChecked = !this.isChecked
			},
			//5，手机号输入时
			inputPhone(phone) {
				//this.form.phone = phone
			},
			//6，密码找回
			gotoRetrieve() {
				uni.navigateTo({
					url: '/pages/login/retrieve/retrieve'
				})
			},
			//7，点击登录按钮
			loginClick() {
				if (!this.isChecked) {
					return uni.$showMsg('请先同意隐私协议！')
				}

				//1，登录参数检验
				var reg = /^1[0-9]{10,10}$/;
				if (!this.form.phone || !reg.test(this.form.phone)) {
					return uni.$showMsg('请输入正确手机号！')
				}
				//2，判断登录方式
				if (this.loginType == 'pwd' || this.loginType == 'all') {
					//2.1，密码登录，判断是否输入密码
					if (!this.form.pwd || this.form.pwd.length < 6) {
						return uni.$showMsg('请输入正确密码！')
					}

					//2.2，获取设备信息 安卓10 以及以上的获取到的是单独的设备码串，其中e.imei是空的，所以用uuid
					var equipmentInfo = '';
					// plus.device.getInfo({
					// 	success: function(e) {
					// 		//console.log('getDeviceInfo success: ' + JSON.stringify(e));
					// 		// 双卡手机
					// 		equipmentInfo = e.imei.split(',');
					// 		//console.log(imei);
					// 	},
					// 	fail: function(e) {
					// 		//return e;
					// 		console.log('getDeviceInfo failed: ' + JSON.stringify(e));
					// 	}
					// });

					console.log(uni.$deviceType)

					//2.2，发起网络请求
					httpLoginByPwd(this.form.phone, this.form.pwd, equipmentInfo, uni.$deviceType, this.form.yzm).then(
						res => {
							if (res.data.pubInfo.code !== 0) {
								if (res.data.pubInfo.code === 9995) {
									//需要验证码
									this.loginType = 'all'
								}

								return uni.$showMsg(res.data.pubInfo.message);
							}
							//2.3，参数保存
							var busInfo = res.data.busInfo
							uni.setStorageSync('token', busInfo.token);
							uni.setStorageSync('userId', busInfo.userId);
							uni.setStorageSync('nickname', busInfo.nickname);
							uni.setStorageSync('username', busInfo.username);
							uni.setStorageSync('head', busInfo.head);
							uni.setStorageSync('phone', busInfo.phone);
							uni.setStorageSync('gender', busInfo.gender);
							uni.setStorageSync('address', busInfo.address);
							uni.setStorageSync('birthday', busInfo.birthday);
							//uni.setStorageSync('isVisitorLogin', true);
							this.actUpdateLoginData(true)
							if (busInfo.authentication && busInfo.authentication == '1') {
								uni.setStorageSync('identifyCheck', true)
							}

							//消息通知
							uni.setStorageSync('isUniPush', true);

							//this.getMsgList(busInfo.userId)
							//存储用户信息
							this.actUpdateUserInfoData(busInfo)

							//初始化备注
							this.queryAllUserFriendRemarks(busInfo.userId)

							//消息初始化
							this.initStateValue(busInfo.userId)

							//console.log(this.userInfo)

							//跳转到首页
							this.gotoHome();
						})
				} else {
					//验证码登录
					if (!this.form.yzm || this.form.yzm.length < 6) {
						return uni.$showMsg('请输入验证码！')
					}

					//2.2，获取设备信息 安卓10 以及以上的获取到的是单独的设备码串，其中e.imei是空的，所以用uuid
					var equipmentInfo = '';
					// plus.device.getInfo({
					// 	success: function(e) {
					// 		//console.log('getDeviceInfo success: ' + JSON.stringify(e));
					// 		// 双卡手机
					// 		equipmentInfo = e.imei.split(',');
					// 		//console.log(imei);
					// 	},
					// 	fail: function(e) {
					// 		//return e;
					// 		console.log('getDeviceInfo failed: ' + JSON.stringify(e));
					// 	}
					// });
					console.log(uni.$deviceType)

					//发起网络请求
					httpLoginByCode(this.form.phone, this.form.yzm, equipmentInfo, uni.$deviceType).then(res => {
						if (res.data.pubInfo.code !== 0) {
							return uni.$showMsg(res.data.pubInfo.message);
						}
						//2.3，参数保存
						var busInfo = res.data.busInfo
						uni.setStorageSync('token', busInfo.token);
						uni.setStorageSync('userId', busInfo.userId);
						uni.setStorageSync('nickname', busInfo.nickname);
						uni.setStorageSync('username', busInfo.username);
						uni.setStorageSync('head', busInfo.head);
						uni.setStorageSync('phone', busInfo.phone);
						uni.setStorageSync('gender', busInfo.gender);
						uni.setStorageSync('address', busInfo.address);
						uni.setStorageSync('birthday', busInfo.birthday);
						//uni.setStorageSync('isVisitorLogin', true);
						this.actUpdateLoginData(true)
						if (busInfo.authentication && busInfo.authentication == '1') {
							uni.setStorageSync('identifyCheck', true)
						}

						//消息通知
						uni.setStorageSync('isUniPush', true);

						//初始化备注
						this.queryAllUserFriendRemarks(busInfo.userId)

						//this.getMsgList(busInfo.userId)

						//存储用户信息
						this.actUpdateUserInfoData(busInfo)

						//消息初始化
						this.initStateValue(busInfo.userId)

						//跳转到首页
						this.gotoHome();
					})
				}


			},
			//8，获取消息列表
			getMsgList(userId) {
				getMsgs(userId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//console.log(res.data.busInfo)
					if (res.data.busInfo.length == 0) {
						return
					}

					uni.setStorageSync('notTopMsgData', res.data.busInfo)
				})
			},
			//9，登录成功跳转首页
			gotoHome() {
				uni.reLaunch({
					url: '/pages/main/home/home'
				})
			},
			//10，初始化备注信息
			queryAllUserFriendRemarks(userId) {
				var that = this
				queryAllUserFriendRemarks(userId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//2.3，参数保存
					var busInfo = res.data.busInfo

					for (var i = 0; i < busInfo.length; i++) {
						var updateData = updateInfoData(busInfo[i].fid, 2, 1, busInfo[i].friendRemarks)
						that.updateFriendNickname(updateData)
					}
				})
			},

			//获取设备信息
			getSystemInfo() {
				//1
				// plus.device.getOAID({
				// 	success: function(e) {
				// 		console.log('getOAID success: ' + JSON.stringify(e));
				// 	},
				// 	fail: function(e) {
				// 		console.log('getOAID failed: ' + JSON.stringify(e));
				// 	}
				// });


				//安卓10 以及以上的获取到的是单独的设备码串，其中e.imei是空的，所以用uuid
				plus.device.getInfo({
					success: function(e) {
						//console.log('getDeviceInfo success: ' + JSON.stringify(e));
						// 双卡手机
						const imei = e.imei.split(',');
						return imei
						//console.log(imei);
					},
					fail: function(e) {
						return e;
						//console.log('getDeviceInfo failed: ' + JSON.stringify(e));
					}
				});
				console.log('修改：', plus.device.imei)
			},
			//确定隐私协议
			confirm() {
				this.isChecked = true
				this.isShowPopup = false
			},
			//关闭隐私协议
			popupState() {
				this.isShowPopup = false
			},
			//跳转注册页面
			gotoRegister() {
				uni.navigateTo({
					url: '/pages/login/register/register'
				})
			},
			//游客登录
			visitorLogin() {
				var userToken = uni.getStorageSync('token') || ''
				if (userToken == '') {
					loginByVisitor().then(res => {
						if (res.data.pubInfo.code !== 0) {
							return uni.$showMsg(res.data.pubInfo.message);
						}
						var busInfo = res.data.busInfo

						//存储用户信息
						this.actUpdateUserInfoData(busInfo)

						uni.setStorageSync('token', busInfo.token);
						//uni.setStorageSync('isVisitorLogin', false);

						this.actUpdateLoginData(false)

						this.gotoHome();
					})
				} else {
					this.gotoHome();
				}
			}
		},
		onLoad() {
			//this.getSystemInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		// height: 200rpx;
		// line-height: 200rpx;
		text-align: center;
		padding: 50rpx 0;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}

	.goto-home {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #8295a5;
		line-height: 60rpx;
		height: 60rpx;
		margin-top: 50rpx;
	}

	.content {
		width: 100%;

		.box {}

		.box-change {
			width: 90%;
			margin-left: 5%;
			margin-top: 30rpx;

			text {
				font-size: 32rpx;
				color: #8295a5;
			}
		}

		.box-forgot-pwd {
			width: 90%;
			margin-left: 5%;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 32rpx;
				color: #8295a5;
			}
		}
	}

	.login-btn {
		margin-top: 160rpx;
		width: 100%;

		.btn {
			width: 40%;
			margin-left: 30%;
			height: 80rpx;
			border-radius: 15rpx;
			background-color: #05C160;
			line-height: 80rpx;
			text-align: center;

			text {
				color: #fff;
				font-size: 36rpx;
			}
		}
	}


	.box-con {
		width: 92%;
		margin-left: 4%;
		border-bottom: 2rpx solid #eee;
		display: flex;
		height: 100rpx;
		font-size: 32rpx;
		// margin-bottom: 30rpx;

		.box-con-title {
			width: 20%;
			line-height: 100rpx;
			font-weight: 550;
		}

		.box-con-input {
			width: 60%;
			font-size: 32rpx;
			height: 50rpx;
			margin-top: 25rpx;
		}

		.box-con-clear {
			width: 20%;
			text-align: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-top: 25rpx;
			}
		}

	}
</style>